<script setup name="mv-list">
import { ref, reactive, computed, onMounted } from 'vue'
import { mvlist } from '@/services/home'
import { PlayOne } from '@icon-park/vue-next'
import { formartNum } from '@/utils/util'
import Header from '@/components/common/Header.vue'
import IconPark from '@/components/common/IconPark.vue'

const active = ref('全部')
const list = ref([])
const loading = ref(false)
const finished = ref(false)

const mv_area = ref(['全部', '内地', '港台', '欧美', '日本', '韩国'])
const mv_params = reactive({
  mv_area: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
  mv_type: ['全部', '官方版', '原生', '现场版', '网易出品',],
  mv_order: ['上升最快', '最热', '最新']
})

const handleTabsChange = async () => {
  list.value = []
  finished.value = false
  await onLoad()
}

const onLoad = async () => {
  loading.value = true
  finished.value = false
  const { data, hasMore } = await mvlist({ area: active.value, type: mv_params.mv_type[0], order: mv_params.mv_order[0], limit: 18, offset: list.value.length })
  list.value.push(...data)
  loading.value = false
  if (!hasMore || data.length === 0) finished.value = true
}

// 处理数据
const formattedMvlist = computed(() => {
  const formatted = []
  const mvlist = list.value
  const length = mvlist.length
  for (let i = 0; i < length; i += 3) {
    formatted.push(mvlist.slice(i, i + 3))
  }
  return formatted
})

onMounted(async () => {
  await onLoad()
})
</script>

<template>
  <div class="mv-list">
    <Header defaultStr="视频广场"></Header>
    <van-tabs v-model:active="active" swipeable line-width="20px" color="red" @change="handleTabsChange">
      <van-tab v-for="(item, index) in mv_area" :key="index" :title="item" :name="item">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-row gutter="24" v-for="(row, rowIndex) in formattedMvlist" :key="rowIndex">
            <van-col span="8" v-for="(item, colIndex) in row" :key="colIndex" class="mv-list-cover">
              <RouterLink :to="{ path: '/mvlist/detail', query: { id: item.id } }">
                <van-image radius="4" :src="item.cover" :lazy-load="true" />
                <span class="mv-list-cover-playCount">
                  <IconPark :icon="PlayOne" theme="filled" :size="3" />
                  {{ formartNum(item.playCount) }}
                </span>
                <van-text-ellipsis :content="item.name" rows="1" />
                <span class="mv-list-cover-artists">{{ item.artistName }}</span>
              </RouterLink>
            </van-col>
          </van-row>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.mv-list {
  &-cover {
    padding: 0 !important;
    padding: 8px 6px !important;
    position: relative;

    .van-text-ellipsis {
      font-size: 10px;
    }

    &-playCount {
      display: inline-block;
      height: 12px;
      line-height: 10px;
      border-radius: 10%;
      color: #fff;
      font-size: 10px;
      position: absolute;
      top: 12px;
      right: 12px;
    }

    &-artists {
      font-size: 10px;
      color: #6f6f6f;
    }
  }

  :deep(.van-nav-bar__title) {
    color: var(--reversal-text);
  }

  :deep(.van-tabs__nav--line) {
    background-color: var(--color-background);
  }

  :deep(.van-tab--active) {
    color: var(--reversal-text);
  }

  :deep(.van-tabs__wrap) {
    position: sticky;
    top: 45px;
    z-index: 1;
  }

  :deep(.van-tabs__line) {
    bottom: 6vw;
  }
}
</style>